<template>
  <div
    class="user-wrapper wrapper_1200"
    :style="{ marginTop: showMenu ? 0 : '20px' }"
  >
    <div class="router-tips" v-if="showMenu">
      <nuxt-link to="/">{{ $t(`page.store.index`) }}></nuxt-link>
      <nuxt-link :to="{ path: '/users/order_list', query: { menuCur: 111 } }">{{
        $t(`page.users.userInfo.personalCenter`)
      }}</nuxt-link>
    </div>
    <div class="content acea-row">
      <div class="left-box" v-if="showMenu">
        <div class="left-box">
          <div class="user-menu rd-8">
            <div
              @click="goPage(menu, index)"
              class="menu-item"
              v-for="(menu, index) in userMenu"
              :key="menu.id"
              :class="{ active: menuCur == menu.id }"
            >
              <span v-show="menu.pc_url">{{
                $t(`page.user.mineNav[${index}].name`)
              }}</span>
            </div>
            <div
              @click="goPage(menu, index)"
              class="menu-item"
              v-for="(menu, index) in menus"
              :key="menu.id"
              :class="{ active: menuCur == menu.id }"
            >
              <span v-show="menu.pc_url">{{ menu.translateName }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <NuxtChild />
      </div>
    </div>
    <FloatWindow></FloatWindow>
  </div>
</template>
<script>
import { toTranslateLang, mapToLang } from "@/utils/index.js";
export default {
  name: "user",
  auth: "guest",
  data() {
    return {
      userInfo: {},
      indexCur: 111,
      showMenu: true,
      userMenu: [
        {
          id: 111,
          name: this.$t(`page.user.myOrder`),
          pc_url: "/users/order_list",
        },
        {
          id: 222,
          name: this.$t(`page.users.goodsReturn.refundList`),
          pc_url: "/users/refund_list",
        },
        {
          id: 333,
          name: this.$t(`page.users.replyList.navTitle`),
          pc_url: "/users/evaluation_list",
        },
      ],
      menuCur: 111,
      menus: [],
    };
  },
  computed: {
    locale() {
      return mapToLang(this.$i18n.locale);
    },
  },
  async mounted() {},
  // async asyncData({ app, query, error }) {
  //   try {
  //     let data = await app.$axios.get("/api/front/user/menu/user");
  //     console.log("this.locale", app.i18n);
  //     if (data.data.routine_my_menus) {
  //       data.data.routine_my_menus = toTranslateLang(
  //         data.data.routine_my_menus,
  //         this.locale
  //       );
  //     }
  //     return {
  //       menuCur: query.menuCur || 111,
  //       menus: data.data.routine_my_menus,
  //     };
  //   } catch (e) {
  //     //error({ statusCode: 401, msg: typeof e === "string" ? e : "系统繁忙" });
  //   }
  // },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        this.menuCur = val.query.menuCur || 111;
        if (val.path.includes("/users/merchant_settled")) {
          this.showMenu = false;
        } else {
          this.showMenu = true;
          if (this.menus.length === 0) {
            this.getMenus();
          }
        }
      },
      // 深度观察监听
      deep: true,
      immediate: true,
    },
  },
  head() {
    return {
      title: "",
    };
  },
  methods: {
    async getMenus() {
      if (this.$router.history.current.path === "/users/merchant_settled") {
        return;
      }
      let data = await this.$axios.get("/api/front/user/menu/user");
      if (data.data.routine_my_menus) {
        data.data.routine_my_menus = toTranslateLang(
          data.data.routine_my_menus,
          this.locale
        );
      }
      this.menuCur = this.$route.query.menuCur || 111;
      this.menus = data.data.routine_my_menus;
    },
    goPage(menu, index) {
      this.menuCur = menu.id;
      this.$router.push({
        path: `${menu.pc_url}`,
        query: { menuCur: menu.id },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/variables.scss";
.user-wrapper {
  .left-box {
    width: 230px;
    .user-info {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 170px;
      background: #fff;
      color: #282828;
      font-size: 14px;
      .name {
        margin-top: 10px;
        padding: 0 15px;
      }
    }
    .user-menu {
      width: 100%;
      padding: 30px 14px;
      background: #fff;
      ::v-deep.el-divider--horizontal {
        margin: 35px 0 !important;
      }
      .menu-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        height: 50px;
        color: $use-color-info-light-3;
        cursor: pointer;
        font-size: 14px;
        padding-left: 20px;
        position: relative;
        border-radius: 6px;
        &.active {
          color: $user--color-primary;
          background-color: #e5f1ee;
          font-weight: bold;
        }
      }
    }
  }
  .right-box {
    flex: 1;
    width: 958px;
    min-height: 730px;
    margin-left: 12px;
    padding-bottom: 30px;
  }
}

.router-tips {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #333;
  a {
    color: #333;
  }
  span {
    color: #999999;
  }
}
</style>
